import React, { Component } from 'react'
import { createForm } from 'rc-form'
import { FormattedMessage } from 'react-intl'
import { hashHistory } from 'react-router'
import { Icon, InputItem, Button, Toast } from 'antd-mobile'


class Deposit extends Component {
  state = {
    active : 0
  }
  onClick = () => {
    hashHistory.push('/account/depositresult')
  }
  render() {
    
    const { getFieldProps } = this.props.form
    return (
      <div className="rt-deposit-container">
        <h3><FormattedMessage id="paymethod"/></h3>
        <section className="rt-deposit-payment">
          <div className="-img">
            <div className={`-left ${this.state.active == 0 ? '-active' : ''}`}
              onClick={
                () => {
                  if (this.state.active == 0) {
                    return
                  }
                  this.setState({
                    active: 0
                  })
                }
              }
            >
              <img src={require('static/images/wechat.png')}/>
              <span className={`triangle-bottomright ${this.state.active == 0 ? 'triangle-bottomright-active' : ''}`}></span>
              <Icon type="check"/>
            </div>
            <div className={`-right ${this.state.active == 1 ? '-active' : ''}`}
                onClick={
                  () => {
                                if (this.state.active == 1) {
                      return
                    }
                    this.setState({
                      active: 1
                    })
                  }
                }
            >
              <img src={require('static/images/union.png')}/>
              <span className={`triangle-bottomright ${this.state.active == 1 ? 'triangle-bottomright-active' : ''}`}></span>
              <Icon type="check"/>
            </div>
           
          </div>
        </section>
        <InputItem
          {...getFieldProps('money')}
          onChange={this.onChange}
          placeholder="请输入充值金额（大于0.02）"
          extra="元"
          type="text"
        />
        <Button
          className={`cm-main-button`}
          onClick ={this.onClick}
          
        >
          <FormattedMessage id="next"/>
        </Button>
        <div className="-describe">
          <p>
            <FormattedMessage id="describeone"/>
          </p>
          <p>
            <FormattedMessage id="describetwo"/>
          </p>
        </div>
      </div>
    )
  }
}

export default createForm()(Deposit)